<template>
  <div class="split-layout">
    <div class="left-panel" :style="{ width: leftPaneWidth + 'px' }">
      <customTree
        ref="equipTree"
        :draggable="false"
        :btnArr="btnArr"
        :nodeKey="nodeKey"
        :itemArrs="itemArrs"
        :expandNode="defaultNodeId"
        @handleClickTree="handleClickTree"
      ></customTree>
    </div>
    <div class="resizer" @mousedown="startResize">
      <div ref="dragLine" class="resize" title="收缩侧边栏">
        <i class="el-icon-s-unfold"></i>
      </div>
    </div>
    <div class="right-panel">
      <basicInfo
        ref="eBasicInfo"
        class="right-content"
        :parameterList="parameterList"
        :currentNode="currentNode"
        :popupType="popupType"
        :moveCurrentNodeId="currentNode.id"
        @updateTree="updateTree"
        @getChangeEquipmentMoveParams="getChangeEquipmentMoveParams"
        menuType="edit"
      ></basicInfo>
    </div>
  </div>
</template>

<script>
import customTree from '@/views/equipmentLedger/equipmentMove/equipmentPopup/customTree'
import basicInfo from '@/views/equipmentLedger/equipmentMove/equipmentPopup/basicInfo'
export default {
  name: "equipmentManagePopup",
  components: {
    customTree,
    basicInfo
  },
  props: {
    // 默认要展开的树节点
    defaultNodeId: {
      type: String,
      default: 'id'
    },
    parameterList: {
      type: Array,
      default: () => []
    },
    popupType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isResizing: false, // 拖拽状态
      leftPaneWidth: 300, // 初始左侧宽度
      leftMaxLength: 900, // 左栏最大宽度
      nodeKey: "id", // 树节点唯一标识属性
      btnArr: [],
      itemArrs: [],
      currentNode: {}, // 树组件当前选中节点
    };
  },
  methods: {
    getChangeEquipmentMoveParams(data) {
      this.$emit('getChangeEquipmentMoveParams', data)
    },
    // 修改左栏宽度
    startResize(event) {
      this.isResizing = true;
      let initialX = event.clientX;

      const onMouseMove = (e) => {
        if (this.isResizing) {
          const deltaX = e.clientX - initialX;
          // 限制左栏最大宽度
          if(initialX >= this.leftMaxLength && deltaX > 0) return
          this.leftPaneWidth += deltaX;
          initialX = e.clientX;
        }
      };

      const onMouseUp = () => {
        this.isResizing = false;
        window.removeEventListener("mousemove", onMouseMove);
        window.removeEventListener("mouseup", onMouseUp);
      };

      window.addEventListener("mousemove", onMouseMove);
      window.addEventListener("mouseup", onMouseUp);
    },
    // 点击树节点
    handleClickTree(node) {
      this.currentNode = node;
      this.$emit('handleClickTree', node)
    },
    // 获取当前选中的树节点
    getCurrentTreeNode() {
      this.$emit('getTreeId', {
        equipId: this.currentNode.id,
        equipName: this.currentNode.name,
        label: this.currentNode.label,
        value: this.currentNode.id
      })
    },
    // 更新树
    updateTree(type) {
      //当提交和保存时，type有值，前端显示当前节点的数据；否则前端默认显示第一个节点的数据
      let node = null;
      if (type) {
        node = this.currentNode;
      }
      this.$refs.equipTree.removeData(node);
      this.$refs.equipTree.updataData(node);
    },
  },
};
</script>

<style lang="less" scoped>
.split-layout {
  display: flex;
  width: 100%;
  height: 100%;

  .left-panel {
    flex: 0 0 auto;
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .resizer {
    flex: 0 0 auto;
    width: 18px;
    cursor: col-resize;
    position: relative;

    .resize {
      cursor: col-resize;
      color: #d6d6d6;
      background-color: transparent;
      width: 0px;
      font-size: 18px;
      font-weight: bold;
      position: absolute;
      top: 50%;
    }
  }

  .right-panel {
    flex: 1 1 auto;
    overflow-x: hidden;

    .right-content {
      width: 100%;
      height: 100%;
    }
  }

  /deep/.el-tree-node {
    user-select: none;
  }
}
</style>
